<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>彩妆热卖</title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		 li{
			 list-style: none;
		 }
		 a{
			 text-decoration: none;
			 color: black;
		 }
		 body{
			 background-color: darkgray;
		 }
		 #hotsale{
			 width: 350px;
			 background-color: white;
		 }
		 #hotsale li div {
			 display:none;
		 }
		 #hotsale h3{
			 height: 40px;
			 font-size: 20px;
			 line-height: 40px;
			 background-color: #E9185a;
			 padding-left: 5px;
		 }
		 #hotsale ul li{
			
			 font-size: 16px;
			 line-height: 34px;
			 border-bottom: 1px dashed  darkgray;
		 }
		 #hotsale ul li span{
			 height: 20px;
			 width: 20px;
			 line-height: 20px;
			 text-align: center;
			 vertical-align: middle;
			 background-color: black;
			 color: white;
			 border-radius: 50%;
			 display: inline-block;/*行内块*/
			 margin-right: 10px;
			 margin-left: 4px;
		 }
		 #hotsale ul li:hover a{
			 color: red;
		 }
		 #hotsale ul li:hover span{
			 background-color: red;
		 }
		 #hotsale ul li:hover .pic{
		 		display: block;
				color: red;
				cursor: pointer;
		 }
		</style>
	</head>
	<body>
		<div id="hotsale">
			<h3>大家都喜欢的彩妆</h3>
			<ul>
				<li><a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g </a>
				  <div class="pic">
					  <img src="image/icon-1.jpg"/>
					  <p>￥62.00 最近69122人购买</p>
				  </div>
				</li>
				<li><a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml</a> 
				  <div class="pic">
					  <img src="image/icon-2.jpg"/>
					  <p>￥89.00 最近13610人购买</p>
				  </div>
				</li>
				<li><a href="#"><span>3</span>菲奥娜水漾CC霜40g </a>
				  <div class="pic">
					  <img src="image/icon-3.jpg"/>
					  <p>￥59.90 最近13403人购买</p>
				  </div>
				</li>
				<li><a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml</a>
				  <div class="pic">
					  <img src="image/icon-4.jpg"/>
					  <p>￥169.00 最近16757人购买</p>
				  </div>
				</li>
			</ul>
		</div>
	</body>
</html>
